<template>
  <div>
    <a-modal v-model="visible" width="800px" title="薪资调整详情" cancel-text="关闭" @ok="sure">
      <a-layout-content class="main">
        <!-- title -->
        <a-row>
          <a-col :span="12">
            <a-row class="l_h40">姓名 : {{ obj.name }}</a-row>
            <a-row class="l_h40">手机号: {{ obj.phone }}</a-row>
          </a-col>
          <a-col :span="12">
            <a-row class="l_h40">部门 : {{ obj.depName }}</a-row>
            <a-row class="l_h40"> 入职日期: {{ obj.joinDate | formatDate("d") }} </a-row>
          </a-col>
        </a-row>
        <div v-for="(item, i) in obj.data" :key="i">
          <a-row type="flex" align="middle" style="line-height: 40px">
            <a-col class="circle" />
            <div>{{ item.gmtCreate | formatDate("d") }}</div>
          </a-row>
          <a-row type="flex" class="mg_b20">
            <a-col style="background: #ccc; width: 2px" class="mg_r20" />

            <table border="1" class="table">
              <tr class="th">
                <th>调整前</th>
                <th>调整后</th>
                <th>调整原因</th>
                <th>生效日期</th>
                <th>操作人</th>
                <th>操作日期</th>
                <th>说明</th>
              </tr>
              <tr class="td">
                <td>{{ item.salaryBasic }}</td>
                <td>{{ item.salaryNew }}</td>
                <td>{{ item.changeReason }}</td>
                <td>{{ item.effectiveDate | formatDate("d") }}</td>
                <td>暂无</td>
                <td>{{ item.gmtModified | formatDate("d") }}</td>
                <td>{{ item.remark }}</td>
              </tr>
            </table>
          </a-row>
        </div>
        <!-- <a-table
          rowKey="id"
          :pagination="false"
          bordered
          :columns="columns"
          :dataSource="obj.data"
          :scroll="{ y: 240 }"
        >
        </a-table> -->
      </a-layout-content>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    title: "调整前",
    dataIndex: "item.salaryBasic",
    width: 100
  },
  {
    title: "调整后",
    dataIndex: "item.salaryNew",
    width: 100
  },
  {
    title: "调整原因",
    dataIndex: "item.changeReason",
    width: 100
  },
  {
    title: "生效日期",
    dataIndex: "item.effectiveDate",
    width: 100
  },
  {
    title: "操作人",
    dataIndex: "",
    width: 100
  },
  {
    title: "操作日期",
    dataIndex: "item.gmtModified",
    width: 100
  },
  {
    title: "说明",
    dataIndex: "item.remark",
    width: 100
  }
];

export default {
  props: {
    options: {
      type: Object,
      default: () => ({
        show: false,
        obj: {
          type: Object,
          default: {
            data: []
          }
        }
      })
    }
  },
  data() {
    return {
      visible: false,
      obj: {},
      columns
    };
  },

  watch: {
    options: {
      handler(newVal) {
        newVal.obj.data.forEach((item) => {
          item.gmtModified = this.formatDate(item.gmtModified);
          item.effectiveDate = this.formatDate(item.effectiveDate);
          item.salaryBasic = item.salaryBasic / 100;
          item.salaryNew = item.salaryNew / 100;
        });
        this.visible = newVal.show;
        this.obj = newVal.obj;
      }
    }
  },

  methods: {
    sure() {
      this.visible = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.main {
  min-height: 360px;
  .l_h40 {
    text-align: center;
    line-height: 40px;
  }
}
.circle {
  background: var(--primary);
  width: 10px;
  height: 10px;
  border-radius: 10px;
  margin-left: -4px;
  margin-right: 15px;
}
.table {
  width: calc(100% - 22px);
  text-align: center;
  .th {
    background: #e0e0e0;
    line-height: 37px;
  }
  .td {
    line-height: 37px;
  }
}
</style>
